<template>
	<div>
		<van-nav-bar
			fixed=""
			title="订单评价"
			left-arrow
			@click-left="ret" />
		<div style="height: 50px; width: 100vw"></div>

		<section class="aui-flexView">
			<!-- 订单详细 -->
			<section class="aui-scrollView">
				<!-- 订单状态 -->
				<div class="aui-pay-change">
					<div class="aui-flex">
						<div class="aui-flex-box">
							<h3>{{ indexInfo.orderstatus }}</h3>
						</div>
						<div class="aui-pay-zfb">
							<img src="/assets/images/icon-zfb.png" />
						</div>
					</div>
				</div>

				<!-- 订单商品 -->
				<div
					class="aui-commodity-bg"
					style="background: white">
					<div
						v-for="item in shopInfo"
						:key="item.id"
						style="margin-bottom: 10px; background: #f5f5f5">
						<div class="aui-flex">
							<div class="aui-commodity-img">
								<img :src="item.product.thumb_swiper" />
							</div>
							<div class="aui-flex-box">
								<h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
								<p>商品单价：￥{{ item.price }}</p>
								<span class="aui-barter-time">七天退换</span>
							</div>
							<div>
								<h5>￥{{ item.total }}</h5>
								<p class="aui-sml-text">X{{ item.pronum }}</p>
							</div>
						</div>
						<!-- 评分 -->
						<div style="padding: 15px">
							<van-rate v-model="item.rate" />
						</div>
						<!-- 评价内容 -->
						<van-cell-group inset>
							<van-field
								v-model="item.comment"
								rows="2"
								autosize
								label="评价内容"
								type="textarea"
								maxlength="50"
								placeholder="请输入评价内容"
								show-word-limit />
						</van-cell-group>
						<!-- 评论图片 -->
						<div style="padding: 15px">
							<van-uploader
								v-model="item.imglist"
								multiple
								:max-count="2"
								:after-read="
									// 第一个是图片信息， 第二个是图片id
									(val) => {
										afterRead(val, item.id);
									}
								"
								@delete="
									(val) => {
										afterDel(val, item.id);
									}
								" />
						</div>
					</div>
				</div>

				<div style="padding: 15px; text-align: center">
					<van-button
						type="primary"
						@click="toEvaluate"
						>确认评价</van-button
					>
				</div>
			</section>
		</section>
		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
	import { showFailToast, showSuccessToast } from "vant";
	export default {
		created() {
			this.info(this.$route.query.id);
		},
		data() {
			return {
				indexInfo: [],
				shopInfo: [],
				RequestData: new FormData(),
				isLoading: false
			};
		},
		methods: {
			ret() {
				this.$router.push("/business/order");
			},
			async info(id) {
				this.isLoading = true;
				let res = await this.$api.OrderAppraise({
					id,
					busid: this.$cookies.get("User").id,
				});
				
				if (res.code == 1) {
					this.shopInfo = res.data[0];
					this.indexInfo = res.data[1];
					this.shopInfo.forEach((element) => {
						element.imglist = [];
						element.rate = 0;
						element.comment = "";
					});
				} else {
					showFailToast({ message: res.msg });
				}
				this.isLoading = false;
			},
			async toEvaluate() {

				this.isLoading = true;
				// 每次提交清空RequestData
				this.shopInfo.forEach((element) => {
					this.RequestData.delete(element.id + "[]");
					this.RequestData.delete(element.id + "comment");
					this.RequestData.delete(element.id + "rate");
					element.imglist.forEach((item) => {
						this.RequestData.append(element.id + "[]", item.file);
					});
					this.RequestData.append(element.id + "comment", element.comment);
					this.RequestData.append(element.id + "rate", element.rate);
				});
				this.RequestData.delete("id");
				this.RequestData.append("id", this.$route.query.id);
				this.RequestData.delete("busid");
				this.RequestData.append("busid", this.$cookies.get("User").id);
				let res = await this.$api.ChangeOrderAppraise(this.RequestData);

				// 判断是否被响应拦截器拦截
				if (res.code == -1) {
					showFailToast({ message: res.msg });
				}
				if (res.code == 0) {
					showFailToast({ message: res.msg });
				}
				this.isLoading = false;
				showSuccessToast({ message: res.msg });
				this.$router.push("/business/order");
			},
			afterRead(val, aa) {},
			afterDel(val, id) {},
		},
	};
</script>

<style scoped>
	@import url("/assets/css/orderinfo.css");
</style>
